<template>
  <view class="footer">
    <view class="icon">
      <view class="home" @click="goHome">
        <u-icon name="home" size="42rpx"></u-icon>
        <view class="text">首页</view>
      </view>
      <view class="fav" @click="runFav">
        <u-icon name="star" v-if="!isFav" size="42rpx"></u-icon>
        <u-icon name="star-fill" v-else size="42rpx" :color="activeColor"></u-icon>
        <view class="text">收藏</view>
      </view>
      <view class="cart" @click="goCart">
        <u-icon name="shopping-cart" size="48rpx"></u-icon>
        <view class="text">
          购物车
          <view class="count" v-if="cartCounter > 0">
            <u-badge type="error" max="99" :value="cartDisplay"></u-badge>
          </view>
        </view>
      </view>
    </view>
    <view class="button">
      <view class="cart more" @click="handleCart">
        <text class="t">加入购物车</text>
      </view>
      <view class="buy more" @click="handleBuy">
        <text class="t">立即购买</text>
      </view>
    </view>
  </view>
</template>

<script>
import color from '../../../config/color'
export default {
  props: ['isFav', 'cartCounter', 'cartDisplay'],
  components: {
  },
  data() {
    return {
      activeColor: color.main_color
    }
  },
  methods: {
    goHome() {
      this.$emit('goHome')
    },
    runFav() {
      this.$emit('runFav')
    },
    goCart() {
      this.$emit('goCart')
    },
    handleCart() {
      this.$emit('handleCart')
    },
    handleBuy() {
      this.$emit('handleBuy')
    }
  }
}
</script>

<style scoped lang="scss">
.footer {
  position: fixed;
  width: 100%;
  height: 110rpx;
  left: 0;
  bottom: 0;
  display: flex;
  background: white;
  padding: 15rpx 40rpx;
  box-sizing: border-box;
  border-top: 1rpx solid #f3f3f3;
  z-index: 9999;
  .icon {
    flex: 1;
    display: flex;
    justify-content: space-between;
    padding: 10rpx 30rpx;
    .home, .fav, .cart {
      color: $second_text_color;
      font-size: 24rpx;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      //background: red;
      &.cart {
        //background: red;
        .text {
          position: relative;
          .count {
            position: absolute;
            top: -45rpx;
            right: -5rpx;
          }
        }
      }
    }
  }
  .button {
    flex: 1.89;
    display: flex;
    padding-top: 5rpx;
    view {
      flex: 1;
      //height: 70rpx;
      //line-height: 70rpx;
      font-size: 28rpx;
      box-sizing: border-box;
      letter-spacing: 2rpx;
      display: flex;
      flex-direction: column;
      justify-content: center;
      &.cart {
        border: 1rpx solid $main_color;
        color: $main_color;
        border-top-left-radius: 30rpx;
        border-bottom-left-radius: 30rpx;
        text-align: center;
      }
      &.buy {
        background: $main_color;
        color: white;
        border-top-right-radius: 30rpx;
        border-bottom-right-radius: 30rpx;
        text-align: center;
      }
      &.more {
        overflow: hidden;
        letter-spacing: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        .t {
        }
        .d {
          font-size: 24rpx;
          //color: black;
        }
      }
    }
  }
}
</style>
